<template>
  <div class="common-card-view-component">
    <a-spin :spinning="loading">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="file in data" :key="file.id">
          <a-card
            hoverable
            :body-style="{ padding: '12px' }"
            class="file-card"
            :class="{ 'file-card-selected': selectedRowKeys.includes(file.id) }"
            @click="toggleSelection(file.id)"
          >
            <div class="file-card-preview">
              <img
                v-if="isImageFile(file)"
                :src="file.url"
                :alt="file.originalName"
                class="file-card-image"
              />
              <div v-else class="file-card-icon">
                <FileImageOutlined v-if="isDocumentFile(file)" class="doc-icon" />
                <VideoCameraOutlined v-else-if="isVideoFile(file)" class="video-icon" />
                <SoundOutlined v-else-if="isAudioFile(file)" class="audio-icon" />
                <FileOutlined v-else class="other-icon" />
              </div>
            </div>

            <div class="file-card-info">
              <div class="file-card-title" :title="file.originalName">
                {{ file.originalName }}
              </div>
              <div class="file-card-meta">
                <span>{{ file.extension ? file.extension.toUpperCase() : '' }}</span>
                <span>{{ formatFileSize(file.size) }}</span>
              </div>
            </div>

            <div class="file-card-actions">
              <a-tooltip :title="t('file.preview')" v-if="isPreviewable(file)">
                <a-button
                  type="text"
                  size="small"
                  @click.stop="$emit('preview', file)"
                >
                  <EyeOutlined />
                </a-button>
              </a-tooltip>
              <a-tooltip :title="t('file.download')">
                <a-button
                  type="text"
                  size="small"
                  @click.stop="$emit('download', file)"
                >
                  <DownloadOutlined />
                </a-button>
              </a-tooltip>
              <a-tooltip :title="t('file.copyLink')">
                <a-button
                  type="text"
                  size="small"
                  @click.stop="$emit('copy-link', file)"
                >
                  <LinkOutlined />
                </a-button>
              </a-tooltip>
              <a-tooltip :title="t('common.delete')">
                <a-popconfirm
                  :title="t('file.confirmDelete')"
                  @confirm="$emit('delete', file)"
                  @click.stop
                >
                  <a-button
                    type="text"
                    size="small"
                    danger
                  >
                    <DeleteOutlined />
                  </a-button>
                </a-popconfirm>
              </a-tooltip>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 卡片视图分页 -->
      <div class="card-pagination">
        <a-pagination
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          :total="pagination.total"
          :showTotal="pagination.showTotal"
          :showSizeChanger="pagination.showSizeChanger"
          :showQuickJumper="pagination.showQuickJumper"
          @change="handlePaginationChange"
        />
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import type { TablePaginationConfig } from 'ant-design-vue'
import type { File as FileData } from '@/types/api/file'

defineOptions({
  name: 'CardView'
})

// Props定义
const props = withDefaults(defineProps<{
  loading?: boolean
  data: FileData[]
  selectedRowKeys: string[]
  pagination?: TablePaginationConfig
  isImageFile: (file: FileData) => boolean
  isDocumentFile: (file: FileData) => boolean
  isVideoFile: (file: FileData) => boolean
  isAudioFile: (file: FileData) => boolean
  isPreviewable: (file: FileData) => boolean
  formatFileSize: (size: number) => string
}>(), {
  loading: false,
  data: () => [],
  selectedRowKeys: () => [],
  pagination: () => ({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true
  })
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:selectedRowKeys', keys: string[]): void
  (e: 'preview', file: FileData): void
  (e: 'download', file: FileData): void
  (e: 'copy-link', file: FileData): void
  (e: 'delete', file: FileData): void
}>()

// 国际化
const { t } = useI18n()

// 切换选择状态
const toggleSelection = (id: string) => {
  emit('update:selectedRowKeys', [id])
}

// 分页变更
const handlePaginationChange = (page: number, pageSize: number) => {
  // 实现分页变更逻辑
}
</script>

<style lang="scss" scoped>
.common-card-view-component {
  .file-card {
    position: relative;
    transition: all 0.3s;
    
    &-selected {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
    }
    
    &-preview {
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: $border-radius-base;
      overflow: hidden;
      margin-bottom: $spacing-sm;
      
      .file-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .file-card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        
        .anticon {
          font-size: 40px;
        }
        
        .doc-icon {
          color: #2b579a;
        }
        
        .video-icon {
          color: #ff6d70;
        }
        
        .audio-icon {
          color: #5cdbd3;
        }
        
        .other-icon {
          color: #8c8c8c;
        }
      }
    }
    
    &-info {
      padding: $spacing-sm 0;
      
      .file-card-title {
        font-weight: 500;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .file-card-meta {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
    }
    
    &-actions {
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #f0f0f0;
      padding-top: $spacing-sm;
    }
  }
  
  .card-pagination {
    margin-top: $spacing-lg;
    text-align: center;
  }
}
</style> 